<template>
  <div>
    <!-- <div v-if="!identity" class="main">你没有该权限！！！</div> -->
    <!-- <div v-else> -->
    <div>
      <el-card v-if="username != undefined" class="title">
        {{ username }}老师您的课表
      </el-card>
      <el-card>
        <el-table :data="timeData" stripe style="width: 100%">
          <el-table-column
            label="周"
            fixed="left"
            prop="label"
            align="center"
          ></el-table-column>

          <el-table-column label="上午" align="center">
            <el-table-column
              v-for="(v, i) in titleData"
              :key="i"
              v-if="v.label === '上午'"
              align="center"
            >
              <template slot="header" slot-scope="scope">
                <div class="tabletitle-timeline">
                  第{{ v.count }}节 <br />
                  {{ v.startTime }}-{{ v.endTime }}
                </div>
              </template>
              <template slot-scope="scope">
                <div>
                  <div>{{ scope.row[classKey[i]] }}<br /></div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="下午" align="center">
            <el-table-column
              v-for="(v, i) in titleData"
              :key="i"
              v-if="v.label === '下午'"
              align="center"
            >
              <template slot="header" slot-scope="scope">
                <div class="tabletitle-timeline">
                  第{{ v.count }}节 <br />
                  {{ v.startTime }}-{{ v.endTime }}
                </div>
              </template>
              <template slot-scope="scope">
                <div>
                  <div>{{ scope.row[classKey[i]] }}<br /></div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/system/user";
import { list } from "@/api/tab/data";
import { classIdentity } from "@/api/tab/class";
export default {
  data() {
    return {
      // identity: false,
      username: undefined,
      pageButton: {}, //权限按钮
      //年级班级数据
      classKey: ["oneC", "twoC", "threeC", "fourC", "fiveC", "sixC"], //科目key值
      //每天的课表
      timeData: [
        {
          id: "1",
          label: "周一",
        },
        {
          id: "2",
          label: "周二",
        },
        {
          id: "3",
          label: "周三",
        },
        {
          id: "4",
          label: "周四",
        },
        {
          id: "5",
          label: "周五",
        },
      ],
      //课节数据---标题
      titleData: [
        {
          id: "1",
          count: 1,
          label: "上午",
          startTime: "08:25",
          endTime: "09:05",
        },
        {
          id: "2",
          count: 2,
          label: "上午",
          startTime: "09:15",
          endTime: "09:55",
        },
        {
          id: "3",
          count: 3,
          label: "上午",
          startTime: "10:10",
          endTime: "10:50",
        },
        {
          id: "4",
          count: 4,
          label: "上午",
          startTime: "11:00",
          endTime: "11:40",
        },
        {
          id: "5",
          count: 5,
          label: "下午",
          startTime: "14:40",
          endTime: "15:20",
        },
        {
          id: "6",
          count: 6,
          label: "下午",
          startTime: "15:30",
          endTime: "16:10",
        },
      ],
    };
  },
  mounted() {
    // this.classIdentity();
    getUserProfile().then((res) => {
      this.username = res.data.user.userName;
    });
    this.list();
  },
  methods: {
    // classIdentity() {
    //   classIdentity().then((respnse) => {
    //     if (respnse) {
    //       this.identity = true;
    //     } else {
    //       this.identity = false;
    //     }
    //   });
    // },
    //获取班级课程表
    list() {
      classIdentity().then((response) => {
        if (response) {
          list().then((res) => {
            this.timeData = res;
            if (res.length < 1) {
              this.timeData = [
                {
                  id: "1",
                  label: "周一",
                },
                {
                  id: "2",
                  label: "周二",
                },
                {
                  id: "3",
                  label: "周三",
                },
                {
                  id: "4",
                  label: "周四",
                },
                {
                  id: "5",
                  label: "周五",
                },
              ];
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.tabletitle-timeline {
  line-height: 18px !important;
}
.el-card.is-always-shadow {
  margin: 20px;
}
.el-dialog__header {
  text-align: center;
}
.span {
  margin-top: 2% !important;
  margin-left: 48% !important;
}
.title {
  text-align: center;
  display: block;
  font-weight: bold;
}
.el-cascader-menu__list {
  width: 236px;
}
.pc-sel-area-cascader[x-placement^="bottom"] {
  // 选择器面板与输入框的距离
  margin-top: 1px !important;
}

.pc-sel-area-cascader {
  /* // 选择面板样式 */
  // .el-cascader-panel {
  //   width: 543px;
  // }
  // .el-cascader-menu__wrap {
  //   /* // 设置选择器省市区分块面板高度 */
  //   height: 200px;
  // }
  .el-cascader-menu {
    /* // 省市区分块右边框 */
    border: none;
  }
  .el-scrollbar__thumb {
    /* // 上下滚动条 */
    display: none;
  }
  .el-cascader-node {
    height: 40px;
  }
  .el-cascader-node:hover {
    /* // 设置鼠标滑过时文字颜色 */
    color: #4e5ef1;
  }
  .el-cascader-node__label {
    /* // 设置文字样式 */
    padding: 0 7px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
  /* // 文字选中样式及span背景颜色 */
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    color: #4e5ef1;
  }
  .el-icon-check {
    /* // 去掉选中小对勾 */
    display: none;
  }
  .el-icon-arrow-right {
    /* // 选项去掉右侧小图标 */
    display: none;
  }
  /* // 选择器面板边框及圆角设置 */
  border-radius: 12px !important;
  border: 1px solid #f6f7f8 !important;
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07) !important;
}
.pc-sel-area-cascader[x-placement^="bottom"] {
  /* // 选择器面板与输入框的距离 */
  margin-top: 1px !important;
}
.pc-sel-area-cascader[x-placement^="bottom"] .popper__arrow {
  /* // 输入框下面小三角形 */
  display: none;
}
.title {
  text-align: center;
  display: block;
  font-weight: bold;
}
.main {
  text-align: center; /*让div内部文字居中*/
  background-color: #fff;
  border-radius: 20px;
  width: 400px;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-weight: bold;
  font-size: 40px;
}
</style>